bubbleで作るWebアプリにAuth0を使ってログインできるのか

#bubble

#NoCode

森亮介

2021.10.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Bubbleというノーコードツールを使って社内用途に使うWebアプリを作れないか検証しているのですが、認証に関してパスワード認証だけでなく、ソーシャルログインやADを繋いでログインするなども考慮に入れています。

本記事ではAuth0を使ってbubbleにログインする方法を調べたのでやり方を記載しようと思います。

Auth０のアプリケーションを準備

Auth0のダッシュボードにログインし、Regular Web Applicationでアプリを作成します。

Client ID、Client Secret　はのちに必要なので控えておきます。

コネクション(ログイン方法)を作成後、アプリケーションの設定画面で有効にします。

今回は Auth0のDatabase接続, Facebook, google-oauth2のソーシャル接続を有効にしました。

Bubbleでapp準備

Bubbleにサインアップした後、appを作成します。

作成が完了するとアプリの編集画面に遷移します。

デフォルトでアプリのテンプレートが当たっていますが、今回はStart with a blank pageをクリックしてまっさらな状態で試します。

アプリのコンポーネントはドラッグアンドドロップで配置できます。

テキストとボタンを配置してみました。

※ ページの右上にあるPreviewボタンを押すと現在編集しているアプリをプレビューできます

Auth0に接続できるようにする

先ほど配置したボタンを押したらAuth0のログイン画面に遷移し、ログインを行う　というシナリオでやっていきます。

これを行うには、Auth0のAPIにBubbleから接続できるようにしないといけませんでした。

そこで必要なのはBubbleが提供しているAPI Connectorというプラグインになります。

左メニューのPliginsをクリックし、Add Pluginsボタンを押します。

APIと検索し、API Connectorをインスコします。

Auth0 API接続設定

API Connectorがインストールできたら、Auth0に接続するための設定を行なっていきます。

Add Another APIをクリックし、設定画面を出します。

設定内容ですが、

API Name
- API名を記入
Authentication
- OAuth2 User-Agent Flow を選択
App ID
- Auth0アプリケーションのClient ID を記入
App Secret
- Auth0アプリケーションのClient Secret　を記入
Dev. App ID
- Auth0アプリケーションのClient ID を記入　(開発環境用です)
Dev. secret
- Auth0アプリケーションのClient Secret　を記入　(開発環境用です)
Scope
- openid email profile を記入。必要に応じて追加しましょう。
Authentication goes in the header
- チェックを入れる
Use a generic redirect URL
- チェックを入れる
Header key
- Authorization: Bearer
Login dialog redirect
- https://<<Auth0テナントのドメイン名>>.auth0.com/authorize
Access token endpoint
- https://<<Auth0テナントのドメイン名>>.auth0.com/oauth/token
User profile endpoint
- https://<<Auth0テナントのドメイン名>>.auth0.com/userinfo
User ID key path
- sub
User email key path
- email

とします。

Auth０を使ってログインした後、ログインユーザーの名前などをアプリで取得して表示したい場合は、Call部分のexpandを押して設定していきます。

GETで、https://<<Auth0テナントのドメイン名>>.auth0.com/userinfoを入力します。

Initialize callを押して設定を保存する必要がありますが、以下のように失敗します。

これを行うにはまずAPIをランモードでテストする必要があるとのことでした。

のちにBubbleアプリのワークフロー設定を行うので、それが終わった後テストすることにします。

You haven't tested this API in run mode and authenticated with Auth0 API yet. You need to do this first to setup calls and to test the URLs and keys.To do this, setup a login workflow, run your app in run mode (with debug_mode=true in the URL) and authenticate with the service. Once done, your access token will be used to initate the API calls and the API will be marked as valid.IMPORTANT: make sure not to have a change page action in the workflow you use to authenticate while testing